
interface ProductShowcaseProps {
    productKey: string
    imagePath: string
    imageAlt: string
    bgColor?: string
    reversed?: boolean
    lang?: string
    customProductLayoutClass?: string
    style?: string
}
import { getTranslation } from '../../locales/translations';

export default function ProductShowcase({
    productKey,
    imagePath,
    imageAlt,
    bgColor = "bg-white",
    reversed = false,
    customProductLayoutClass = "",
    style = "dark",
    lang
}: ProductShowcaseProps) {
    const isRtl = lang === 'ar';
    const t = (key: string) => getTranslation(key, lang);

    // Get translations for this product
    const title = t(`products.${productKey}.title`);
    const subtitle = t(`products.${productKey}.description`);
    const learnMore = t('buttons.learnMore');
    return (
        <section className={`${bgColor} w-full flex-grow pb-1 ${style === "dark" ? 'text-white' : "text-[#333]"}`}>
            {/* Mobile View */}
            <div className="md:hidden bg-white w-full">
                <div className={`relative min-h-[12rem] flex ${reversed !== isRtl ? "flex-row-reverse" : "flex-row"}`}>
                    <div className="relative flex-grow" onClick={() => window.open(`/${lang}/product/${productKey}`, '_self')}>
                        <div className={`left-[40%] w-auto text-center break-words top-[50%] ${customProductLayoutClass} -translate-y-[50%] absolute`}>
                            <h2 className="text font-bold mb-2">{title}</h2>
                            <p className="text-sm mb-6">{subtitle}</p>
                            <a href={`/${lang}/product/${productKey}/`} className="inline-block">
                                <button className="px-7 py-3 rounded-full font-[600] text-[#087AD1] bg-white text hover:bg-gray-50 transition-colors">
                                    {learnMore}
                                </button>
                            </a>
                        </div>
                        <img
                            src={imagePath}
                            alt={imageAlt}
                            className='h-full w-full'
                        />
                    </div>
                </div>
            </div>

            {/* Desktop View */}
            <div className="hidden md:block bg-white w-full">
                <div className={`relative flex ${reversed !== isRtl ? "flex-row-reverse" : "flex-row"}`}>
                    <div className="relative flex-grow" onClick={() => window.open(`/${lang}/product/${productKey}`, '_self')}>
                        <div className={`left-1/4 top-[10%] absolute ${customProductLayoutClass}`}>
                            <h2 className="text-3xl font-bold mb-2">{title}</h2>
                            <p className="text mb-6">{subtitle}</p>
                            <a href={`/${lang}/product/${productKey}/`} className="inline-block">
                                <button className="px-6 py-2 rounded-full text-[#087AD1] bg-white text font-medium hover:bg-gray-50 transition-colors">
                                    {learnMore}
                                </button>
                            </a>
                        </div>
                        <img
                            src={imagePath}
                            alt={imageAlt}
                            className='w-full'
                        />
                    </div>
                </div>
            </div>
        </section>
    )
}

